<template>
  <div class="configuration-container">
    <type-string
      v-if="type === Type.text"
      :name="name"
      :config="config"
      :extra="extra"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-switch
      v-if="type === Type.switch"
      :name="name"
      :config="config"
      :extra="extra"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-radio
      v-if="type === Type.radio"
      :name="name"
      :config="config"
      :extra="extra"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-select
      v-if="type === Type.select"
      :name="name"
      :config="config"
      :extra="extra"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-multi-select
      v-if="type === Type.multiSelect"
      :name="name"
      :config="config"
      :extra="extra"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-stepper
      v-if="type === Type.stepper"
      :name="name"
      :config="config"
      :extra="extra"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-array
      v-if="type === Type.array"
      :name="name"
      :config="config"
      :extra="extra"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-upload
      v-if="type === Type.upload"
      :name="name"
      :config="config"
      :extra="extra"
      @change="(e, v) => $emit('change', e, v)"
    />
  </div>
</template>
<script>
import { Type } from './options.constants'
import TypeString from './type-string.vue'
import TypeSwitch from './type-switch.vue'
import TypeRadio from './type-radio.vue'
import TypeSelect from './type-select.vue'
import TypeMultiSelect from './type-multi-select.vue'
import TypeStepper from './type-stepper.vue'
import TypeArray from './type-array.vue'
import TypeUpload from './type-upload.vue'

export default {
  name: 'options-container',
  data() {
    return {
      Type,
    }
  },
  props: ['type', 'name', 'config', 'extra'],
  components: {
    'type-string': TypeString,
    'type-switch': TypeSwitch,
    'type-radio': TypeRadio,
    'type-select': TypeSelect,
    'type-multi-select': TypeMultiSelect,
    'type-stepper': TypeStepper,
    'type-array': TypeArray,
    'type-upload': TypeUpload,
  },
};
</script>
<style scoped>
.configuration-container {
  /* margin-top: 20px; */
}
.options-title {
  text-align: left;
  flex: 1;
  margin-left: 10px;
  min-width: 100px;
}
.options-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.input {
  border-radius: 15px;
  box-shadow: 0px 0px 10px 0px #ccc;
  width: 100px;
  padding: 4px 10px 4px 15px;
  box-sizing: border-box;
  margin-right: 10px;
  border: none;
  flex: 1;
}
.operate-container {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.close-btn {
  cursor: pointer;
  border: 1px solid #aaa;
  color: #aaa;
  padding: 0;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-btn {
  cursor: pointer;
  width: 100%;
}
</style>